import {View,Text,StyleSheet,Button} from 'react-native'
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'
import AntDesign from 'react-native-vector-icons/AntDesign'
import Feather from 'react-native-vector-icons/Feather'

import React from 'react'
let Tab = createBottomTabNavigator()
function Home({navigation}){
    function _goWiFi(){
        navigation.navigate('Setting',{screen:'WiFi'})
    }
    function _goBluetooth(){
        navigation.navigate('Setting',{screen:'Bluetooth'})
    }
    return <View>
            <Text style={styles.style}>Home</Text>
            <AntDesign onPress={_goWiFi} name='wifi' color={'green'} size={60}></AntDesign>
            <Feather onPress={_goBluetooth} name='bluetooth' color={'blue'} size={60}></Feather>
        </View>
}
function About(){
    return <View><Text style={styles.style}>About</Text></View>
}
function Setting(){
    function _screen({route}){
        return{tabBarIcon:({color,size})=>{
            switch (route.name) {
                case 'WiFi':
                    return <AntDesign name='wifi' color={color} size={size}></AntDesign>
                case 'Bluetooth':
                    return <Feather name='bluetooth' color={color} size={size}></Feather>
            }
        }}
    }
    return <Tab.Navigator screenOptions={_screen}>
        <Tab.Screen name="WiFi" component={WiFi}></Tab.Screen>
        <Tab.Screen name="Bluetooth" component={Bluetooth}></Tab.Screen>
    </Tab.Navigator>
}
function WiFi(){
    return <View><Text style={styles.style}>Wifi</Text></View>
}
function Bluetooth(){
    return <View><Text style={styles.style}>蓝牙</Text></View>
}


const styles = StyleSheet.create({
    style:{
        fontSize:60
    }
})
export {Home,About,Setting}